<template>
	<view class="digital-rain">
		{{ text }}
		<view></view>
		{{ text2 }} 
		<view></view>
		{{ text3 }}
	</view>
</template>

<script>
	export default {
		props: {
			// 数字雨的字符串
			text: {
				type: String,
				default: '',
			},
			text2: {
				type: String,
				default: '',
			},
			text3: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				rainInterval: null, // 更新数字的定时器
				fallingRain: [], // 存储数字的数组，模拟下落的效果
				fallingRain2: [],
				fallingRain3: [],
			};
		},
		mounted() {
			this.startRain();
		},
		beforeDestroy() {
			this.stopRain();
		},
		methods: {
			// 开始下雨
			startRain() {
				this.rainInterval = setInterval(() => {
					// const randomDigit = Math.floor(Math.random() * 10); // 生成一个随机数字
					// this.fallingRain.push(randomDigit); // 添加到下落的数组中
					this.fallingRain.push(0); // 添加到下落的数组中
					this.text = this.fallingRain.join('\n'); // 更新显示的文本
					this.fallingRain2.push(1); // 添加到下落的数组中
					this.text2 = this.fallingRain2.join('\n');
					this.fallingRain3.push(3); // 添加到下落的数组中
					this.text3 = this.fallingRain3.join('\n');
					this.fallingRain = [];
					this.fallingRain2 = [];
					this.fallingRain3 = [];
				}, 100);
			},
			// 停止下雨
			stopRain() {
				if (this.rainInterval) {
					clearInterval(this.rainInterval);
				}
			},
		},
	};
</script>

<style lang="scss">
	.digital-rain {
		font-size: 20px;
		text-align: center;
		/* 添加数字飘落的CSS动画 */
		animation: rain 2s infinite;
	}

	@keyframes rain {
		0% {
			transform: translateY(500px);
		}

		25% {
			transform: translateY(400px);
		}

		50% {
			transform: translateY(300px);
		}

		75% {
			transform: translateY(100px);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>